<template>
<div class="auth-page">
  <div class="container page">
    <div class="row">
      <div class="col-md-6 offset-md-3 col-xs-12">
        <h1 class="text-xs-center">Sign in</h1>
        <p class="text-xs-center">
          <RouterLink :to="{name:'register'}"> Need an account?</RouterLink>
        </p>

        <ul class="error-messages">
          <li>That email is already taken</li>
        </ul>
        
        <form @submit.prevent="doLogin">
          <fieldset class="form-group">
            <input v-model="loginInfo.user.email" class="form-control form-control-lg" type="text" placeholder="Email" />
          </fieldset>
          <fieldset class="form-group">
            <input v-model="loginInfo.user.password" class="form-control form-control-lg" type="password" placeholder="Password" />
          </fieldset>
          <input class="btn btn-lg btn-primary pull-xs-right" type="submit" value="Sign in">
        </form>
      </div>
    </div>
  </div>
</div>
</template>
<script setup lang="ts">
import { UserReg } from '@/model';
import { ref } from 'vue';
import { login } from '@/api';
import { useRouter } from 'vue-router';

const router = useRouter()
let loginInfo = ref<UserReg>({
    user:{
        email:"",
        password:""
    }
})

function doLogin(){
    login(loginInfo.value).then(res =>{
        console.log(res.data);
        router.push('/')
    })
}
</script>
<style scoped>
</style>
